@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --accentA: #7c5cff; /* purple */
  --accentB: #22d3ee; /* teal   */

  --bg: #0a0d14;
  --bar: #0e1118;
  --card: #11141b;
  --text: #e7ecf3;
  --muted: #9aa3b2;
  --accent: #6ea8ff;
  --green: #22c55e;
  --yellow: #f59e0b;
  --red: #ef4444;
  --border: #1f2430;
  --chip: #1b2030;
  --shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
  --blurbar: rgba(18, 20, 26, 0.78);

  /* Newer design heading accents */
  --heading-strong: #9fb7ff;
  --heading-sub: #8ea2c9;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 禁用全局 outline、点击高亮 */
*:focus {
  outline: none !important;
  box-shadow: none !important;
}
* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: Arial, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica;
}

/* 保持滚动行为安全 */
html[data-scroll-behavior='smooth'] {
  scroll-behavior: smooth;
}

@layer utilities {
  .btn_white {
    @apply border-white bg-white px-8 py-3 text-green-50;
  }
  .btn_white_text {
    @apply border-white bg-white px-8 py-3 text-gray-90;
  }
  .btn_green {
    @apply border-green-50 bg-green-50 px-8 py-5 text-white;
  }
  .btn_dark_green {
    @apply bg-green-90 px-8 py-4 text-white transition-all hover:bg-black;
  }
  .btn_dark_green_outline {
    @apply border-gray-20 bg-green-90 px-8 py-5 text-white;
  }

  .max-container {
    @apply mx-auto max-w-[1440px];
  }

  .padding-container {
    @apply px-6 lg:px-20 3xl:px-0;
  }

  .flexCenter {
    @apply flex items-center justify-center;
  }

  .flexBetween {
    @apply flex items-center justify-between;
  }

  .flexStart {
    @apply flex items-center justify-start;
  }

  .flexEnd {
    @apply flex items-center justify-end;
  }

  /* FONTS */
  .regular-64 {
    @apply text-[64px] font-[400] leading-[120%];
  }

  .regular-40 {
    @apply text-[40px] font-[400] leading-[120%];
  }

  .regular-32 {
    @apply text-[32px] font-[400];
  }

  .regular-24 {
    @apply text-[24px] font-[400];
  }

  .regular-20 {
    @apply text-[20px] font-[400];
  }

  .regular-18 {
    @apply text-[18px] font-[400];
  }

  .regular-16 {
    @apply text-[16px] font-[400];
  }

  .regular-14 {
    @apply text-[14px] font-[400];
  }

  .medium-14 {
    @apply text-[14px] font-[600];
  }

  .bold-88 {
    @apply text-[88px] font-[700] leading-[120%];
  }

  .bold-64 {
    @apply text-[64px] font-[700] leading-[120%];
  }

  .bold-52 {
    @apply text-[52px] font-[700] leading-[120%];
  }

  .bold-40 {
    @apply text-[40px] font-[700] leading-[120%];
  }

  .bold-32 {
    @apply text-[32px] font-[700] leading-[120%];
  }

  .bold-20 {
    @apply text-[20px] font-[700];
  }

  .bold-18 {
    @apply text-[18px] font-[700];
  }

  .bold-16 {
    @apply text-[16px] font-[700];
  }

  /* Hero */
  .hero-map {
    @apply absolute right-0 top-0 h-screen w-screen bg-pattern-2 bg-cover bg-center md:-right-28 xl:-top-60;
  }

  /* Camp */
  .camp-quote {
    @apply absolute -right-6 bottom-4 w-[140px] lg:bottom-10 xl:-right-8 xl:w-[186px] 3xl:right-0;
  }

  /* Feature */
  .feature-phone {
    @apply absolute top-[13%] z-10 hidden max-w-[1500px] rotate-[15deg] md:-left-16 lg:flex  3xl:left-20;
  }

  /* Get App */
  .get-app {
    @apply max-container relative flex w-full  flex-col justify-between gap-32 overflow-hidden bg-green-90 bg-pattern bg-cover bg-center bg-no-repeat px-6 py-12 text-white sm:flex-row sm:gap-12 sm:py-24 lg:px-20 xl:max-h-[598px] 2xl:rounded-5xl;
  }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* 自定义全局滚动条样式 */
::-webkit-scrollbar {
  height: 6px; /* 水平滚动条高度 */
  width: 6px; /* 垂直滚动条宽度 */
}

::-webkit-scrollbar-track {
  background: transparent; /* 轨道透明 */
}

::-webkit-scrollbar-thumb {
  background: rgba(56, 64, 82, 0.6); /* 深灰带透明度 */
  border-radius: 9999px; /* 圆角滚动条 */
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(90, 100, 120, 0.8); /* 悬停时亮一点 */
}

/* Firefox 支持 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 64, 82, 0.6) transparent;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.2s ease-out;
}
